<template>
  <view class="w-full">
    <!-- 第一级：横向Tab -->
    <tab :list="level1List" v-model:active="activeLevel1" 
         class="bg-[#e6f0ff] pt-2 px-2 box-border w-full overflow-y-hidden"
         direction="horizontal" label="name">
      <template #tab="{ tab, idx, active }">
        <view class="flex-center px-6 pt-2 rounded-t-xl"
              :class="active ? 'bg-white text-blue-500 font-bold translate-y-1 pt-3 pb-4' : 'text-gray-500 translate-y-2'"
              @click="handleTabClick($event, tab, 1)">
          <text v-if="tab.isAddButton" class="text-[32rpx] mr-1 font-bold">+</text>
          <text class="text-[28rpx] whitespace-nowrap">{{ tab.title }}</text>
        </view>
      </template>
    </tab>

    <view class="flex bg-white overflow-hidden w-full box-border p-2">
      <!-- 第二级：纵向Tab -->
      <tab class="w-[200rpx] h-[16vh] overflow-y-auto bg-[#f5f5f5] mr-2" 
           :list="level2List" v-model:active="activeLevel2"
           direction="vertical" label="name">
        <template #tab="{ tab, idx, active }">
          <view class="flex items-center border-l-4 border-l-solid px-2 py-2 whitespace-nowrap"
                :class="active ? 'border-green-500 bg-white text-green-500 font-bold' : 'border-transparent text-gray-500'"
                @click="handleTabClick($event, tab, 2)">
            <text v-if="tab.isAddButton" class="text-[32rpx] mr-1 font-bold">+</text>
            <text class="text-[28rpx] truncate w-full">{{ tab.title }}</text>
          </view>
        </template>
      </tab>

      <!-- 第三级：内容区 -->
      <view class="flex-1 h-[16vh] overflow-y-auto bg-white box-border">
        <tab :list="level3List" v-model:active="activeLevel3" 
             class="box-border w-full box-border p-1 gapss" 
             direction="horizontal" label="name">
          <template #tab="{ tab, idx, active }">
            <nut-button 
              size="mini" 
              class="text-nowrap add-btn-with-icon" 
              :type="active ? 'success' : 'default'"
              @click="handleTabClick($event, tab, 3)"
            >
              <text v-if="tab.isAddButton" class="text-[28rpx] mr-1 font-bold">+</text>
              {{ tab.title }}
            </nut-button>
          </template>
        </tab>

        <!-- 内容展示区 -->
        <view class="p-1">
          <view v-if="loading" class="text-center py-8">
            <text class="text-gray-500">加载中...</text>
          </view>
          <slot v-else name="content" :current-item="currentLevel3Item" :level1="currentLevel1Item" :level2="currentLevel2Item">
            <view class="text-center text-gray-500 py-8">
              请选择三级目录项查看内容
            </view>
          </slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, computed, onMounted } from "vue";
import Taro from "@tarojs/taro";
import tab from "@/components/basic-comm/tab.vue";
import { request } from "@/service/request";
import { localStg, PlatformUtils } from "@/utils";
import { useHospitalStore } from '@/store';
const hospitalStore = useHospitalStore();
// let defaultPid = '1967471917904056321';// 藤县
let defaultPid = '1950460485593350145';// 南宁安好

// Props
const props = defineProps({
  // 是否显示"添加"按钮
  showAddButton: {
    type: Boolean,
    default: true
  },
  // 添加按钮的文本配置
  addButtonText: {
    type: Object,
    default: () => ({
      level1: "添加部门",
      level2: "添加科室", 
      level3: "添加项目"
    })
  }
});

// Emits
const emit = defineEmits(['change', 'add']);

// 响应式数据
const level1List = ref([]);
const level2List = ref([]);
const level3List = ref([]);

const activeLevel1 = ref(0);
const activeLevel2 = ref(0);
const activeLevel3 = ref(0);

// 加载状态
const loading = ref(false);

// 计算属性
const currentLevel1Item = computed(() => {
  return level1List.value[activeLevel1.value] || null;
});

const currentLevel2Item = computed(() => {
  return level2List.value[activeLevel2.value] || null;
});

const currentLevel3Item = computed(() => {
  const item = level3List.value[activeLevel3.value] || null;
  // console.log('currentLevel3Item 计算:', {
  //   activeLevel3: activeLevel3.value,
  //   level3ListLength: level3List.value.length,
  //   item: item
  // });
  return item;
});

// 获取标签列表
const getTagList = (pid) => {
  return new Promise(async (resolve, reject) => {
    // console.log("getTagList pid:", pid);
    const params = {};
    // if (pid !== null && pid !== undefined) {
    //   params.pid = pid || '1892856895601541122';
    // }
    if (pid) {
      params.pid = pid;
    } else {
      params.pid = await getOrgId();
    }
    // params.pid = pid || (await getOrgId());
    // params.hospitalId = 1;

    // const url = '/nurse_dept/nurseDept/rootList';
    const url = '/sys/sysDepart/queryDepartTreeSync';
    request.get(url, params, {
      useErrMsg: true
    }).then(res => {
      // console.log("getTagList res====", res);
      if (res.success && res.success.records) {
        resolve(res.success.records);
      } else if (res.success) {
        // 如果直接是数组格式
        resolve(Array.isArray(res.success) ? res.success : []);
      } else {
        resolve([]);
      }
    }).catch(error => {
      // console.error("getTagList error:", error);
      reject(error);
    });


  });
};

const getOrgId = async () => {
  const orgCode = hospitalStore.defaultHospital.sysOrgCode;
  // console.log("getOrgId current sysOrgCode:", orgCode);
  
  if (!orgCode) {
    // console.warn("sysOrgCode is empty, returning default value");
    return Promise.resolve(0);
  }
  
  return new Promise((resolve, reject) => {
    request.get('/sys/sysDepart/getDepartName', {
      orgCode
    }, {
      useErrMsg: true
    }).then(res => {
      // console.log("org res====", res);
      const id = res.success.id;
      // console.log("id====", id);
      resolve(id);
    }).catch(error => {
      // console.error("getOrgId error:", error);
      reject(0);
    });
  });
};

// 自动延迟选择相关
let autoSelectTimer = null;

const scheduleAutoSelect = () => {
  if (autoSelectTimer) {
    clearTimeout(autoSelectTimer);
    autoSelectTimer = null;
  }
  autoSelectTimer = setTimeout(() => {
    runAutoSelectFlow();
  }, 4000);
};

const runAutoSelectFlow = async () => {
  try {
    // console.log('开始自动延迟选择流程');
    if (!level1List.value || level1List.value.length === 0) {
      // console.log('level1List 为空，无法自动选择');
      return;
    }

    // 选中第一级第一个
    activeLevel1.value = 0;
    await loadLevel2Data(0);

    if (!level2List.value || level2List.value.length === 0) {
      // console.log('level2List 为空，无法自动选择');
      return;
    }

    // 选中第二级第一个
    if (!level2List.value[0]?.isAddButton) {
      activeLevel2.value = 0;
      await loadLevel3Data(0);
    }

    if (!level3List.value || level3List.value.length === 0) {
      // console.log('level3List 为空，无法自动选择');
      return;
    }

    // 选中第三级第一个并触发变更
    if (!level3List.value[0]?.isAddButton) {
      activeLevel3.value = 0;
      emit('change', { level: 3, item: level3List.value[0] });
      // console.log('已自动选择第三级第一个项目并触发变更');
    }
  } catch (e) {
    // console.error('自动延迟选择流程失败:', e);
  }
};

// 初始化根级数据
const initData = async () => {
  try {
    loading.value = true;
    // console.log("获取根级数据...", hospitalStore.defaultHospital.sysOrgCode);

    // 检查 sysOrgCode 是否存在
    if (!hospitalStore.defaultHospital.sysOrgCode) {
      // console.warn("sysOrgCode is not available yet, skipping initialization");
      return;
    }

    // 方法2: 使用 PlatformUtils 工具类获取（推荐）
    const defaultHospital = PlatformUtils.getDefaultHospital();
    // console.log("defaultHospital====", defaultHospital);
    // defaultPid = defaultHospital?.id || defaultPid;
    const list = await getTagList(); // 根级pid为null
    // console.log("根级数据:", list);

    
    if (list && list.length > 0) {
      level1List.value = [...list];
      
      // 添加"添加"按钮
      // if (props.showAddButton) {
      //   level1List.value.push({ 
      //     id: 'add-level1', 
      //     title: props.addButtonText.level1,
      //     isAddButton: true 
      //   });
      // }
      
      // 设置默认选中，watch会自动触发加载第二级数据
      activeLevel1.value = 0;
    } else {
      // console.warn("没有获取到根级数据");
      level1List.value = [];
      
      // 即使没有数据，也添加"添加"按钮
      // if (props.showAddButton) {
      //   level1List.value.push({ 
      //     id: 'add-level1', 
      //     title: props.addButtonText.level1,
      //     isAddButton: true 
      //   });
      //   // 清空下级数据
      //   level2List.value = [];
      //   level3List.value = [];
      //   activeLevel2.value = -1;
      //   activeLevel3.value = -1;
      // }
    }
  } catch (error) {
    // console.error("获取根级数据失败:", error);
    level1List.value = [];
    
    // 即使失败，也添加"添加"按钮
    // if (props.showAddButton) {
    //   level1List.value.push({ 
    //     id: 'add-level1', 
    //     title: props.addButtonText.level1,
    //     isAddButton: true 
    //   });
    //   // 清空下级数据
    //   level2List.value = [];
    //   level3List.value = [];
    //   activeLevel2.value = -1;
    //   activeLevel3.value = -1;
    // }
  } finally {
    loading.value = false;
  }
};

// 加载第二级数据
const loadLevel2Data = async (level1Index) => {
  if (level1Index === -1 || !level1List.value[level1Index]) {
    level2List.value = [];
    level3List.value = [];
    activeLevel2.value = -1;
    activeLevel3.value = -1;
    return;
  }

  const currentItem = level1List.value[level1Index];
  
  // 如果是添加按钮，不加载子数据
  if (currentItem.isAddButton) {
    return;
  }

  // 重置下级数据
  level2List.value = [];
  level3List.value = [];
  activeLevel2.value = -1;
  activeLevel3.value = -1;

  try {
    loading.value = true;
    const pid = currentItem.id;
    // console.log("获取第二级数据, pid:", pid);
    const list = await getTagList(pid);
    // console.log("第二级数据:", list);
    
    if (list && list.length > 0) {
      level2List.value = [...list];
      
      // 添加"添加"按钮
      // if (props.showAddButton) {
      //   level2List.value.push({ 
      //     id: 'add-level2', 
      //     title: props.addButtonText.level2,
      //     isAddButton: true 
      //   });
      // }
      
      activeLevel2.value = 0; // 默认选中第一个，watch会自动触发加载第三级数据
    } else {
      // 即使没有数据，也添加"添加"按钮
      // if (props.showAddButton) {
      //   level2List.value.push({ 
      //     id: 'add-level2', 
      //     title: props.addButtonText.level2,
      //     isAddButton: true 
      //   });
      //   // 清空第三级数据，因为添加按钮不应该触发子数据加载
      //   level3List.value = [];
      //   activeLevel3.value = -1;
      // }
    }
  } catch (error) {
    // console.error("获取第二级数据失败:", error);
    
    // 即使失败，也添加"添加"按钮
    // if (props.showAddButton) {
    //   level2List.value.push({ 
    //     id: 'add-level2', 
    //     title: props.addButtonText.level2,
    //     isAddButton: true 
    //   });
    //   // 清空第三级数据，因为添加按钮不应该触发子数据加载
    //   level3List.value = [];
    //   activeLevel3.value = -1;
    // }
  } finally {
    loading.value = false;
  }
};

// 加载第三级数据
const loadLevel3Data = async (level2Index) => {
  if (level2Index === -1 || !level2List.value[level2Index]) {
    level3List.value = [];
    activeLevel3.value = -1;
    return;
  }

  const currentItem = level2List.value[level2Index];
  
  // 如果是添加按钮，不加载子数据
  if (currentItem.isAddButton) {
    return;
  }

  // 重置下级数据
  level3List.value = [];
  activeLevel3.value = -1;

  try {
    loading.value = true;
    const pid = currentItem.id;
    // console.log("获取第三级数据, pid:", pid);
    const list = await getTagList(pid);
    // console.log("第三级数据:", list);
    
    if (list && list.length > 0) {
      level3List.value = [...list];
      
      // 添加"添加"按钮
      // if (props.showAddButton) {
      //   level3List.value.push({ 
      //     id: 'add-level3', 
      //     title: props.addButtonText.level3,
      //     isAddButton: true 
      //   });
      // }
      
      activeLevel3.value = 0; // 默认选中第一个
      // console.log('设置 activeLevel3.value = 0, 当前第三级列表:', level3List.value);
    } else {
      // 即使没有数据，也添加"添加"按钮
      // if (props.showAddButton) {
      //   level3List.value.push({ 
      //     id: 'add-level3', 
      //     title: props.addButtonText.level3,
      //     isAddButton: true 
      //   });
      // }
    }
  } catch (error) {
    // console.error("获取第三级数据失败:", error);
    
    // 即使失败，也添加"添加"按钮
    // if (props.showAddButton) {
    //   level3List.value.push({ 
    //     id: 'add-level3', 
    //     title: props.addButtonText.level3,
    //     isAddButton: true 
    //   });
    // }
  } finally {
    loading.value = false;
  }
};

// 统一处理Tab点击事件
const handleTabClick = (event, tab, level) => {
  // console.log("handleTabClick tab====", tab);
  // 如果是添加按钮，阻止默认行为并触发添加事件
  if (tab.isAddButton) {
    event.stopPropagation();
    
    let parentId = null;
    
    if (level === 2) {
      // 第二级添加，父级是第一级当前选中项
      const parent = level1List.value[activeLevel1.value];
      parentId = parent?.id || null;
    } else if (level === 3) {
      // 第三级添加，父级是第二级当前选中项
      const parent = level2List.value[activeLevel2.value];
      parentId = parent?.id || null;
    }
    
    emit('add', { level, parentId });
  }
  // 如果不是添加按钮，事件会正常传播，Tab组件会处理切换逻辑
};

// 监听第一级变化
watch(activeLevel1, async (newVal) => {
  // console.log('activeLevel1 变化:', newVal, level1List.value[newVal]);
  const currentItem = level1List.value[newVal];
  
  // 如果是添加按钮，阻止切换
  if (currentItem && currentItem.isAddButton) {
    return;
  }

  // 加载子数据
  await loadLevel2Data(newVal);
  
  emit('change', { level: 1, item: currentItem });
});

// 监听第二级变化
watch(activeLevel2, async (newVal) => {
  // console.log('activeLevel2 变化:', newVal, level2List.value[newVal]);
  const currentItem = level2List.value[newVal];
  
  // 如果是添加按钮，阻止切换
  if (currentItem && currentItem.isAddButton) {
    return;
  }

  // 加载子数据
  await loadLevel3Data(newVal);
  
  emit('change', { level: 2, item: currentItem });
});

// 监听第三级变化
watch(activeLevel3, (newVal) => {
  // console.log('activeLevel3 变化:', newVal, level3List.value[newVal]);
  
  if (newVal === -1 || !level3List.value[newVal]) {
    return;
  }

  const currentItem = level3List.value[newVal];
  
  // 如果是添加按钮，阻止切换
  if (currentItem.isAddButton) {
    return;
  }

  // console.log('触发第三级变化事件:', currentItem);
  emit('change', { level: 3, item: currentItem });
});

// 监听 hospitalStore.defaultHospital.sysOrgCode 的变化
watch(
  () => hospitalStore.defaultHospital.sysOrgCode,
  async (newSysOrgCode, oldSysOrgCode) => {
    // console.log("sysOrgCode changed:", { old: oldSysOrgCode, new: newSysOrgCode });
    
    // 只有当 sysOrgCode 有值且与之前不同时才重新初始化
    if (newSysOrgCode && newSysOrgCode !== oldSysOrgCode) {
      // console.log("sysOrgCode updated, reinitializing data...");
      await initData();
      scheduleAutoSelect();
    }
  },
  { immediate: false } // 不立即执行，只在变化时执行
);

let job = '';

// 暴露刷新方法
const refresh = async (str = '') => {
  job = str;
  await initData();
};

// 手动设置选中项的方法
const setActiveLevel = (level, index) => {
  // console.log(`手动设置级别${level}选中项:`, index);
  
  if (level === 1) {
    activeLevel1.value = index;
  } else if (level === 2) {
    activeLevel2.value = index;
  } else if (level === 3) {
    activeLevel3.value = index;
  }
};

// 获取当前选中项的方法
const getCurrentItem = (level) => {
  if (level === 1) {
    return level1List.value[activeLevel1.value] || null;
  } else if (level === 2) {
    return level2List.value[activeLevel2.value] || null;
  } else if (level === 3) {
    return level3List.value[activeLevel3.value] || null;
  }
  return null;
};

// 暴露方法给父组件
defineExpose({
  refresh,
  level3List,
  currentLevel3Item,
  setActiveLevel,
  getCurrentItem,
  loadLevel2Data,
  loadLevel3Data,
  level1List,
  level2List,
});

onMounted(async () => {
  await initData();
  scheduleAutoSelect();
});
</script>

<style lang="scss">
.add-btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nut-button__wrap{
  max-width: 200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
